<template>
    <div>
        <a-modal v-model="visible"
                 :title="title"
                 @ok="handleOk"
                 @cancel="cancel"
                 centered
                 width="40em"
                 :cancelText="cancelText"
                 :okText="okText">
            <a-form-model
                    ref="form"
                    :model="classesRecord"
                    :rules="rules"
                    :label-col="{ span: 5 }"
                    :wrapper-col="{ span:  16}"
            >
                <!--弹框信息设置-->
                <a-form-model-item label="年级" prop="grade">
                    <a-select show-search placeholder="" v-model="classesRecord.grade"  default-value="" style="width: 24.3em" @change="getsGrade">
                        <a-select-option :value="gradeData[index]" v-for="(item,index) in gradeData" :key="item">
                            {{item}}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="专业" prop="major">
                <!-- :disabled="showMajordata"-->
                    <a-select show-search placeholder="" v-model="classesRecord.major"  default-value="" style="width: 24.3em">
                        <a-select-option :value="majorData[index]" v-for="(item,index) in majorData" :key="item">
                            {{item}}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="班号" prop="number">
                    <a-tooltip placement="topLeft" title="格式为：X(班级号)。例如：1，2">
                        <a-input placeholder="格式为：X(班级号)。例如：1，2" v-model="classesRecord.number"/>
                    </a-tooltip>
                </a-form-model-item>
            </a-form-model>
        </a-modal>
    </div>
</template>

<script>
    import { mapState } from "vuex";
    const rules={
        grade:[{ required: true, message: '请输入年级!',trigger: 'change'}],
        major:[{ required: true, message: '请输入专业名称!',trigger: 'change'}],
        number:[{ required: true, message: '请输入班号!',trigger: 'change'}],
    }
    export default {
        name: "addClasses",
        data() {
            return {
                rules,
                title: '',
                flag: false,
                visible:false,
                cancelText:'',
                okText:'',
                gradeData: [],
                majorData: [],
                showMajordata:true,  //默认命令选择框是禁用的
                classesRecord:{
                    classesId:'',
                    grade:'',
                    major:'',
                    number:'',
                }
            }
        },
        methods: {
            getsGrade(){ // 根据年级获取专业
                // 如果第一个选择框有值，那么第二个选择框可选，否则禁用
                if(this.classesRecord.grade.length>0){
                    this.showMajordata = false;
                }else{
                    this.showMajordata = true;
                }
            },
            //表格编辑特定班级
            showModel(record){
                this.visible=true;//显示弹框
                if(record === ''){
                    this.title='新建班级信息';
                    this.cancelText='取消';
                    this.okText='添加';
                    this.flag=false
                }
            },
            //确定时回调
            handleOk(){
                if(this.flag === false){
                    //新增
                    this.$refs.form.validate(value=>{
                        if(value){
                            this.$store.dispatch('classes/addClasses',{token:this.accessState.token,classRecord:this.classesRecord}).then(data=>{
                                    this.$message.success(data.msg);
                                    this.visible=false;
                                    this.$refs.form.resetFields();
                                    this.$emit("get")
                            }).catch((err)=>{
                                if(String(err)==='undefined'){
                                    this.$message.error('请检查数据格式');
                                }else {
                                    this.$message.error(err.msg);
                                }
                            });
                        }else {
                            this.$message.error("请正确填写表单");
                        }
                    })
                }
                this.showMajordata = true;
            },
            //取消时回调
            cancel(){
                this.visible=false;
                this.$refs.form.resetFields();
                this.showMajordata = true;
            }
        },
        created() {
            this.$store.dispatch('classes/getGrades')
                .then((res) => {
                    this.gradeData.push(...res.data.grades)
                })
                .catch((err) => {
                    this.$message.error(err.msg)
                })
          const info={
            collegeId: this.accessState.collegeId, //获取管理员ID（需要改动）
            grade: ''
          };
          this.majorData=[];
          this.$store.dispatch('classes/getMajors',info)
              .then(res => {
                this.majorData.push(...res.data.majors)
              })
              .catch(err => {
                this.$message.error(err.msg)
              })
        },
        computed: {
            ...mapState({ // 这个是提取store中access文件夹目录下的数据
                'accessState': 'access'
            })
        }
    }
</script>

<style scoped>
</style>
